<template>
  <div>
    <header class="my-header">
      <myHeader />
    </header>
    <section>
      <div class="my-order">
        <myOrder />
      </div>
      <div class="my-tools">
        <myTools />
      </div>
    </section>
    <footer class="footer">
      <footerBottom :activeIndex="4" />
    </footer>
  </div>
</template>
<script>
import myHeader from './myHeader'
import myOrder from './myOrder'
import myTools from './myTools'
import footerBottom from '../../base/footerBottom'
export default {
  components: {
    myHeader,
    myOrder,
    myTools,
    footerBottom,
  },
  data() {
    return {}
  },
}
</script>
<style lang="less" scoped>
.my-order {
  margin: 0 auto;
  margin-top: 1.493333rem;
  width: 14.933333rem;
  height: 5.546667rem;
}
.my-tools {
  width: 14.933333rem;
  height: 8.021333rem;
  margin: 0 auto;
  margin-top: 1.493333rem;
}
.footer {
  position: fixed;
  bottom: 0;
  width: 100%;
}
</style>
